<template>
  <!-- 项目管理 -->
  <div class="personProject">
      <head-usual :title="projectTitle" :to="to"></head-usual>
      <!-- 我创建的、我参与的 -->
        <mt-navbar v-model="type">
            <mt-tab-item id="1">我创建的</mt-tab-item>
            <mt-tab-item id="2">我参与的</mt-tab-item>
        </mt-navbar>
        <div class="project_statu">
           <select v-model="searchCondition.status" @change="SelectChangeStatus" placeholder="项目阶段">
                            <option value="0" selected="selected">全部</option>
                            <option value="1">竞标中</option>
                            <option value="2">招募中</option>
                            <option value="3">进行中</option>
                            <option value="4">已完成</option>
           </select> 
          <!-- <el-select v-model="searchCondition.status" placeholder="项目阶段" @change="SelectChangeStatus" >
             <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
          </el-select> -->          
        </div> 
        <!-- tab-container -->
        <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="0">
            <mt-tab-container v-model="type" swipeable >
            <mt-tab-container-item id="1">
                <div class="position-list"  >
                <!-- 每一条项目信息 -->
                    <div v-for="(item,index) in CreateProjectList" :key="index">
                        <div class="position-item" >
                                <div class="project-item-1">
                                    <span><router-link :to="'/projects/detail/'+item.id" >{{item.name}}</router-link></span>
                                   
                                </div>
                                <div class="project-item-2">
                                    <p class="project-item-type item">
                                    <svg class="icon price-bottom-01" aria-hidden="true">
                                        <use xlink:href="#icon-leixing"></use>
                                    </svg>
                                    <span class="type-special">类型：</span>
                                    <span>{{item.type}}</span>
                                    </p>
                                    <p class="project-item-time item">
                                        <svg class="icon price-bottom-01" aria-hidden="true">
                                            <use xlink:href="#icon-zhouqifuwushiduan"></use>
                                        </svg>
                                        <span class="type-special">周期：</span>
                                        <span>{{item.duration}}</span>
                                    </p>
                                </div>
                                <div class="project-check">
                                    <p>
                                        <svg class="icon price-bottom-01" aria-hidden="true">
                                            <use xlink:href="#icon-chakan"></use>
                                        </svg>
                                        <span>{{item.hits}}人查看></span>
                                    </p>
                                    <p>
                                        <span>{{item.addtime}}</span>
                                        <span>发布</span>
                                    </p>
                                </div>
                                 <div class="item-edit">
                                      <router-link class="edit-left" :to="'/user/project/candidate/'+item.id">报名人选 ({{item.signUpNum}})</router-link>
                                      <span class="edit-fenge"></span>
                                      <a  @click="HandelDel(index,item.id)">删除项目</a>
                                </div>
                               
                        </div>
                    </div>
                   
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
            <div class="position-list"  >
                <!-- 每一条项目信息 -->
                    <div v-for="(item,index) in CreateProjectList" :key="index">
                        <div class="position-item" >
                                <div class="project-item-1">
                                     <span><router-link :to="'/projects/detail/'+item.id" >{{item.name}}</router-link></span>
                                      <p class="project-item-delete" @click="HanddelSignOut(index,item.id)">退出参与</p>
                                </div>
                                <div class="project-item-2">
                                    <p class="project-item-type item">
                                    <svg class="icon price-bottom-01" aria-hidden="true">
                                        <use xlink:href="#icon-leixing"></use>
                                    </svg>
                                    <span class="type-special">类型：</span>
                                    <span>{{item.type}}</span>
                                    </p>
                                    <p class="project-item-time item">
                                        <svg class="icon price-bottom-01" aria-hidden="true">
                                            <use xlink:href="#icon-zhouqifuwushiduan"></use>
                                        </svg>
                                        <span class="type-special">周期：</span>
                                        <span>{{item.duration}}</span>
                                    </p>
                                   
                                </div>
                                <p style="padding:5px;"></p>
                                <div class="project-send" v-show="item.exInfo">
                                   <span class="send-1">项目通知：</span>
                                   <span class="send-2">{{item.exInfo}}</span>
                                   <span class="send-3" @click="readMore(item.exInfo)">查看更多</span>
                                </div>
                        </div>
                    </div>
                </div>
            </mt-tab-container-item>
            </mt-tab-container>
              <!-- 点击查看更多弹出框 -->
            <mt-popup v-model="popupMore" popup-transition="popup-fade" class="read-popup">
                    <p class="project-view">项目通知</p>
                    <p class="detail">{{popupTipText}}</p>
            </mt-popup>
            <div v-show="loading" class="page-infinite-loading">
                        <mt-spinner type="fading-circle"></mt-spinner>
                        加载中...
            </div>
            <div v-show="allLoaded" class="page-infinite-data">亲！别拉了我是有底线的</div>
        </div>
  </div>
</template>
<script>
import { MessageBox } from "mint-ui";
import { Navbar, TabItem, Popup } from "mint-ui";
import { GetProjectList,ProjectSignOut,Delete } from "@/api/user/project";
export default {
  data() {
    return {
      userinfo: {},
      to:'/user',
      popupTipText:"",
      searchCondition: {
        id: 0,
        pageIndex: 1,
        status: '项目阶段',
        type: "1"
      },
       options: [{
          value: '0',
          label: '全部'
        }, {
          value: '1',
          label: '竞标中'
        }, {
          value: '2',
          label: '招募中'
        }, {
          value: '3',
          label: '进行中'
        }, {
          value: '4',
          label: '已完成'
        }],
      totalPage: 0,
      type: "1",
      loading: false, //是否显示加载中
      allLoaded: true, //加载完毕
      status: 0, //项目状态
      projectTitle: "项目管理",
      CreateProjectList: {},
      visible: false ,//项目阶段弹出框是否可见,
      popupMore:false,
    };
  },
  
  created() {
    this.userinfo = this.$store.state.userinfo;
    this.searchCondition.id = this.userinfo.id;
    this.Initialization();
  },
  methods: {
    Initialization() {
      this.$indicator.open();
      setTimeout(() => {
        GetProjectList(this.searchCondition).then(res => {
          if (res.StatusCode === 200) {
            this.CreateProjectList = res.Data;
            this.totalPage = res.TotalPage;
            this.$indicator.close();
          }
        });
      }, 100);
    },
    loadMore(cmd) {
      //分页加载更多
      if (this.searchCondition.pageIndex >= this.totalPage) {
        this.allLoaded = true;
        return;
      }
      this.loading = true;
      setTimeout(() => {
        this.searchCondition.pageIndex++;
        GetPagedList(this.searchCondition).then(res => {
          if (res.StatusCode === 200) {
            this.CreateProjectList = this.CreateProjectList.concat(res.Data);
          }
        });
        this.loading = false;
      }, 1000);
    },
    HanddelSignOut(index,proid){
       MessageBox.confirm("确定退出该项目？？").then(action => {
          ProjectSignOut(this.searchCondition.id,proid).then(res=>{
              if(res.Data)
              {
                 this.CreateProjectList.splice(index,1);
              }
              else  this.$toast("退出失败,请刷新重试！");
          });
        });
    },
    HandelDel(index,proid){
       MessageBox.confirm("你确定删除该项目??，删除后不能找回，请谨慎操作！！！").then(action => {
          Delete(proid).then(res=>{
              if(res.Data)
              {
                 this.CreateProjectList.splice(index,1);
              }
              else  this.$toast("删除失败,请刷新重试！");
          });
        });
    },
    SelectChangeStatus(){
       this.$indicator.open();
      setTimeout(() => {
        GetProjectList(this.searchCondition).then(res => {
          if (res.StatusCode === 200) {
            this.CreateProjectList = res.Data;
            this.totalPage = res.TotalPage;
            this.$indicator.close();
          }
        });
      }, 200);
    },
    // 筛选项目阶段
    changeState() {
      this.visible = !this.visible;
      if (this.visible == true) {
        $(".icon-xiala").attr("class", "icon icon-active");
      } else {
        $(".icon-active").attr("class", "icon icon-xiala");
      }
    },
    //关闭项目进程下拉
    close() {
      this.visible = false;
    },
    // 点击报名人选查看更多
    learnMore(){
      this.$router.push('/user/project/candidate');

    },
    //点击我参与的查看更多
    readMore(info){
      this.popupTipText=info;
      this.popupMore=true;

    }
  },
  //监听切换类别触发数据刷新
  watch: {
    type(val, oldVal) {
      this.searchCondition.type = val;
      this.searchCondition.pageIndex=1;
      this.Initialization();
    }
  }
};
</script>

<style lang="scss" scoped>
//@import '~@/css/transition';
.personProject {
  border-bottom: 36px solid #f4f4f4;
}
.headUsual {
  border-bottom: 1px solid #eeeeee;
}
.mint-navbar {
  width: 175px;
}
// 设置mint激活按钮字体颜色及下边栏
.mint-navbar .mint-tab-item.is-selected {
  border-bottom: 2px solid #fd4f00;
  color: #fd4f00;
  margin-bottom: -2px;
}
/* 设置个人中心项目管理激活按钮的样式 */
.mint-tab-item {
  color: #282828;
}
.project_statu{
   position: absolute;
    border-radius: 14px;
    font-size: 14px;
    color: #999999;
    right: 10px;
    margin-top: -35px;
    z-index: 2000;
   select{
     height: 20px;
     border-radius: 5px;
     outline: 0;
     border:none;
     option{
       border-radius: 5px;
       outline: 0;
       border:none;
     }

  }
  
}
// 项目进程下拉按钮

.project-process {
  position: absolute;
  font-size: 14px;
  color: #999999;
  padding: 2px 6px;
  border: 1px solid #dcdcdc;
  border-radius: 14px;
  right: 12px;
  margin-top: -35px;
  z-index: 999999;
  background: #ffffff;
  .icon-active {
    transform: rotate(180deg);
  }
  ul {
    padding: 2px 0;
    text-align: center;

    li {
      border-bottom: 1px solid #dcdcdc;
      padding: 1px 0;
    }
    .process-title {
      border: none;
    }
    .li-2 {
      border-top: 1px solid #dcdcdc;
    }
    .li-last {
      border: none;
    }
  }
}
.process-open {
  height: auto;
}
// 职位列表信息
.position-list {
  // 每条职位信息
  .position-item {
    padding: 23px 0px 0px 0px;
    border-bottom: 10px solid #f4f4f4;

    > .project-item-1 {
      margin-bottom: 14.3px;
      overflow: hidden;
      margin-left: 12px;
      margin-right: 12px;
      > span {
        display: block;
      }
      > :first-child {
        float: left;
        font-size: 16px;
        color: #282828;
        margin-right: 24px;
      }
      .project-item-delete{
        float: right;
        color:#3887fe;
        font-size: 14px;
      }
      .title-edit {
        float: right;
        font-size: 14px;
        color: #3887fe;
        margin-top: 1.5px;
      }
    }
    //第二行
    .project-item-2 {
        font-size: 14px;
      position: relative;
      margin-left: 12px;
      margin-right: 12px;
      //   justify-content: space-between;
      .item {
        text-align: center;
        // display: flex;
      }
      .project-item-type {
          display: flex;
          align-items: center;
          margin-bottom: 12px;
        
        span {
         
          color: #666666;
        }
        .type-special {
          color: #999999;
        }
        .icon {
          display: block;
          
          margin-right: 5px;
          color: #999999;
        }
      }
      .project-item-time {
        display: flex;
        align-items: center;
        span {
         
          color: #666666;
        }
        .type-special {
          color: #999999;
        }
        .icon {
          margin-right: 5px;
          color: #999999;
          font-size: 16px;
          margin-left: -2px;
        }
      }
      .project-item-price {
        .price-left {
          color: #999999;
          // padding-left: 12px;
          margin-top: 1px;
          display: block;
          float: left;
        }
        .price-right {
          color: #fd4f00;
          font-size: 16px;
          display: block;
          float: left;
        }
      }
      .project-item-delete {
        color: #3887fe;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    .project-check {
      margin-top: 14.3px;
      color: #999999;
      overflow: hidden;
      font-size: 14px;
      margin-left: 12px;
      margin-right: 12px;
      > :first-child {
        float: left;
        > span {
          float: left;
          display: block;
        }
        > .icon {
          display: block;
          float: left;
          margin-top: 3px;
          margin-right: 7px;
        }
      }
      > :nth-child(2) {
        float: right;
      }
    }
    .project-send{
      margin-left:12px;
      margin-top:15px;
      margin-bottom: 15px;
      margin-right: 12px;
      font-size: 14px;
      border-top:1px dashed #f4f4f4;
      padding-top: 15px;
      position: relative;
      
      .send-1{
        color:#666666;
        margin-bottom: 5px;
      
      }
      .send-2{
        color:#999999;
        overflow: hidden;//必须
        display: -webkit-box;//必须
        -webkit-line-clamp: 2;//必须
        -webkit-box-orient: vertical;//必须
        margin-bottom: 5px;
       
      }
      
            .send-3{
            color:#3887fe;  
          }
     
     
    }
    .item-edit{
      height: 44.6px;
      width: 100%;
      line-height: 44.6px;
      display: flex;
      border-top:1px solid #f4f4f4;
      margin-top:18px;
      font-size: 16px;
      justify-content: space-between;
      text-align: center;
      align-items: center;
     a{
        width: 50%;
        color:#999999;
        display: block;
      }
      .edit-left{
        color:#3887fe;
      }
      span{
        width: 1px;
        height: 14px;
        display: block;
        background: #999999;

      }
    }
  }
   
}
// 查看更多弹出框
.read-popup{
    width: 390px;
    border-radius: 5px;
    .project-view{
        height: 37.3px;
        line-height: 37.3px;
        font-size: 16px;
        color:#282828;
        text-align: center;
        border-bottom: 1px solid #f4f4f4;    
    }
    .detail{
        margin-top:16px;
        margin-left:12px;
        margin-right: 12px;
        font-size: 14px;
        color:#666666;
        text-indent: 2em;
       margin-bottom: 45px;
    }

}

// 设置项目阶段
</style>
